<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>框架</title>
    <style>
        body {
            width: 100%;
            height: 100%;
        }

        #iframe {
            width: calc(50% - 0.25rem);
            height: 100%;
            margin: 0;
            border: 0.125rem solid red;
            display: inline-block;
            position: fixed;
            top: 0;
            left: calc(50% + 0.125rem)
        }

        #first {
            background-color: #eee;
            width: calc(50% - 0.25rem);
            height: 100%;
            margin: 0;
            border: 0.125rem solid red;
            display: inline-block;
            position: fixed;
            top: 0;
            left: 0;
        }

        #image {
            width: 3rem;
            height: 3rem;
            position: fixed;
            top: calc(50% - 1.5rem);
            left: calc(50% - 1.5rem)
        }
    </style>
</head>

<body>
    <div id="first" contenteditable="true"></div>
    <iframe id="iframe"></iframe>
    <img id="image" src="img/arrow_ltor.png" alt="" width="40" height="40">
</body>
<script>
    var button = document.getElementById("image");
    var code = document.getElementById("first");
    var iframe = document.getElementById("iframe");
    button.onclick = function () {
        iframe.srcdoc = code.innerHTML;
    }

</script>

</html>